<template>
	<uni-popup ref="popup" type="center">
		<view class="content">
			<view class="hd"><icon class="iconfont icon" @click="close()">&#xe733;</icon></view>
			<view class="bd">
				<view class="title">提示</view>
				<view class="tips">预计2个工作日内审核</view>
				<view class="long-tips">平台将重新审核您的基本信息。审核过程中将不可使用CRM管理</view>
			</view>
			<view class="ft">
				<button type="default" class="btn btn-continue" hover-class="btnClickStyle" @click="subRequest()">仍要提交</button>
				<button type="default" class="btn" hover-class="btnClickStyle" @click="close()">放弃修改</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useStore } from 'vuex';
import { editBusinessInfo } from '@/subpages/common/api/set.js';

const store = useStore();
const popup = ref(null);
const childrenData = reactive({
	subData: {}
});

function open(data) {
	popup.value.open();
	childrenData.subData = data;
}
function close() {
	popup.value.close();
}
async function subRequest() {
	const pushData = {};
	pushData.introduce = childrenData.subData.introduce;
	pushData.businessname = childrenData.subData.businessname;
	const res = await editBusinessInfo(pushData);
	if (res.code === 200) {
		popup.value.close();
		store.dispatch('app/init');
		setTimeout(() => {
			uni.navigateBack();
		}, 500);
	}
}

defineExpose({
	open,
	close
});
</script>

<style scoped lang="scss">
@import '@/common/css/base.scss';
.content {
	width: 640rpx;
	padding: 0 30rpx 10rpx;
	border-radius: 16rpx;
	background-color: #fff;
	.hd {
		@include flex(row, flex-end);
		height: 80rpx;

		.icon {
			font-size: 36rpx;
			color: #666;
		}
	}
	.bd {
		.title {
			@include flex(row, center);
			margin-bottom: 10rpx;
			font-weight: 700;
			font-size: 32rpx;
			color: #111;
		}
		.tips,
		.long-tips {
			margin-bottom: 10rpx;
			color: #8c8c8c;
			font-size: 26rpx;
			text-align: center;
		}
		.long-tips {
			text-align: left;
		}
	}
	.ft {
		display: flex;
		align-items: center;
		justify-content: center;
		.btn {
			width: 240rpx;
			height: 66rpx;
			line-height: 66rpx;
			margin: 30rpx auto;
			border-radius: 10rpx;
			border: 1px solid $color;
			text-align: center;
			background: $color;
			font-size: 24rpx;
			color: #fff;
		}
		.btn-continue {
			background-color: #fff;
			color: $color;
		}
	}
}
</style>
